<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加品牌</title>
    <link rel="stylesheet" href="libs/bootstrap.min.css">
    <script src="libs/bootstrap.min.js"></script>
    <script src="libs/vue.js"></script>
    <script src="libs/dayjs.min.js"></script>
    <style>
        .btn-link {
            text-decoration: none;
            margin-left: -10px;
        }

        .brand {
            margin-top: 30px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container brand">
        <div class="card">
            <div class="card-header">
                添加品牌
            </div>
            <div class="card-body" style="width: 480px;">
                <div class="input-group">
                    <span class="input-group-text" id="basic-addon1">品牌名称</span>
                    <input type="text" class="form-control" placeholder="请输入品牌名称" aria-label="Username"
                           aria-describedby="basic-addon1" v-model.trim="newBrandName">
                    <button class="btn btn-primary" type="button" @click="addBrand">添加品牌</button>
                </div>
            </div>
        </div>
    </div>
    <div class="container brands">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">品牌名称</th>
                <th scope="col">状态</th>
                <th scope="col">创建时间</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(brand, index) in brands" :key="brand.id">
                <th scope="row">{{ index + 1 }}</th>
                <td>{{ brand.name }}</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" :id="'id-' + brand.id"
                               v-model="brand.isActive">
                        <label class="form-check-label" :for="'id-' + brand.id">
                            <span v-if="brand.isActive">已启用</span>
                            <span v-else>已禁用</span>
                        </label>
                    </div>
                </td>
                <td>{{ brand.createdTime }}</td>
                <td>
                    <button type="button" class="btn btn-link" @click="delBrand(brand.id)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            newBrandName: "",
            brands: [{
                id: 1001,
                name: "宝马",
                isActive: true,
                createdTime: dayjs().set('month', 0).format('YYYY-MM-DD HH:mm:ss')
            }, {
                id: 1002,
                name: "奥迪",
                isActive: false,
                createdTime: dayjs().set('month', 1).format('YYYY-MM-DD HH:mm:ss')
            }, {
                id: 1003,
                name: "奔驰",
                isActive: true,
                createdTime: dayjs().set('month', 2).format('YYYY-MM-DD HH:mm:ss')
            }]
        },
        methods: {
            addBrand() {
                if (!this.newBrandName) {
                    return
                }
                const newBrand = {
                    id: Math.max(...(this.brands.map((b) => b.id))) + 1,
                    name: this.newBrandName,
                    isActive: true,
                    createdTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
                }
                this.brands.unshift(newBrand)
                this.newBrandName = ""
            },
            delBrand(id) {
                const index = this.brands.findIndex((b) => b.id === id)
                this.brands.splice(index, 1)
            },
        }
    });
</script>
</body>
</html>